import useHistory from "../../hooks/useHistory"
import useOnline from "../../hooks/useOnline"
import { useStorage } from "../../hooks/useStorage"
export default function Demo03() {
  const [count, setCount] = useStorage('count', 0)
  const isOnline = useOnline()
  const [url, push, replace] = useHistory()
  return (
    <>
      <h1>useSyncExternalStore示例</h1>

      <h2>1、订阅浏览器API：storage</h2>
      <h3>{count}</h3>
      <button onClick={() => setCount(count + 1)}>加1</button>
      <button onClick={() => setCount(count - 1)}>减1</button>

      <h2>2、订阅浏览器API：online/offline</h2>
      <h3>{isOnline ? '✅ Online' : '❌ Disconnected'}</h3>

      <h2>3、订阅浏览器API：popstate/hashchange</h2>
      <h3>{url}</h3>
      <button onClick={() => push('A')}>push</button>
      <button onClick={() => replace('B')}>replace</button>
    </>
    
  )
}